<template>
    <div class="share">
        <div class="content">
            <!-- 背景盒子 -->
            <div class="bg-box"></div>
            <div class="down">
                <div class="box box1" @click="download(1)">
                    <img src="http://img.xianyufanshen.net//share/image/anzhuoxiazai@2x.png" alt="">
                </div>
                <div class="box box2" @click="download(2)">
                    <img src="http://img.xianyufanshen.net//share/image/pingguoxiazai@2x.png" alt="">
                </div> 
            </div>    
        </div>
    </div>
</template>

<script>
export default {
    name:'appShare',
    created(){
        this.changeTitle();//调用修改title
    },
    methods:{
        //判断是否是微信浏览器的函数
        isWeiXin(){
            //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
            var ua = window.navigator.userAgent.toLowerCase();
            //通过正则表达式匹配ua中是否含有MicroMessenger字符串
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                return true;
            }else{
                return false;
            }
        },
        //动态修改title
        changeTitle(){
            let that = this;
            let title = '咸鱼翻身';
            //判断是否微信环境
            if(that.isWeiXin()){
                // alert("微信");
                var $body = $('body');
                document.title = title;
                var $iframe = $("<iframe style='display:none;'></iframe>");
                $iframe.on('load',function() {
                    setTimeout(function() {
                        $iframe.off('load').remove();
                    }, 0);
                }).appendTo($body);
            }else{
                //alert("不是微信");
                document.title  = title;
            }
        },
    	//跳转到下载地址
        download(type) {
           let _type = type;//获得类型 1安卓 2 ios
           if(_type == 1){
                //    alert("安卓");
                window.location.href = "https://fir.im/q95d";
           }else{
                 window.location.href = "https://fir.im/jvs7";
                // alert("Ios");
           }
        },
    }
    
}

</script>

<style lang="stylus" scoped>
 .share{
    width :100%;
    height :100%;
    background :#fff;
    .content{
         position:relative;
         height :100%;
        .bg-box{
            width :100%;
            height :360px;
            background :url("http://img.xianyufanshen.net//share/image/beijing_xiazai@2x.png") no-repeat;
            // background-size :100%;
            background-size :cover; 
        }
        .down{
           
        }
        .box{
            width:74%;
            height:1.12rem;
            position:absolute;
            left:50%;
            margin-left:-37%;
            img{
                width :100%;
                height :100%;
            }
            &.box1{
                bottom :3.306667rem;
            }
            &.box2{
                bottom :1.786667rem;
            }
        }
    }
}    
</style>